<!--课时标准设置-->
<template>
  <div>
    <el-table
      :data="tableData"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column prop="zwName" label="职位" align="center" />
      <el-table-column prop="hsbz" label="课时标准" align="center" />
      <el-table-column prop="yzkzfbl" label="优质课增发比例" align="center" />
      <el-table-column width="350" label="操作" align="center">
        <template slot-scope="scope">
          <div class="report-button" style="width: 80px; background: #F1FFFA; border: 1px solid #04C670; color: #04C670;" @click="handleSet(scope.row)">
            <img src="../../../assets/assessment/icon-plan-record-detail.png" />
            <span>设置</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="课时标准设置" :visible.sync="dialogShow" width="800px">
      <div class="my-form-container" style="height: 100%">
        <el-form :model="formData" :rules="rules" ref="ruleForm" hide-required-asterisk=“true”>
          <el-form-item class="my-form-item" prop="zwName">
            <div class="my-form-item-label">
              <span>职位</span>
            </div>
            <span style="font-weight: 600; color: #004ca7; margin: 22px 31%;">{{ formData.zwName }}</span>
          </el-form-item>
          <el-form-item class="my-form-item" prop="hsbz">
            <div class="my-form-item-label">
              课时标准
              <span class="mustW">*</span>
            </div>
            <el-input-number v-model="formData.hsbz" :precision="2" controls-position="right" clearable placeholder="请输入课时标准" style="width: 100%; margin: 22px 20px;" />
          </el-form-item>
          <el-form-item class="my-form-item" prop="yzkzfbl">
            <div class="my-form-item-label">
              优质课增发比例
              <span class="mustW">*</span>
            </div>
            <el-input-number v-model="formData.yzkzfbl" :precision="2" controls-position="right" clearable placeholder="请输入优质课增发比例" style="width: 100%; margin: 22px 20px;" />
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex;">
        <div class="report-button" style="margin-top: 50px; width: 80px; height: 35px; line-height: 35px; background: #FFF6F0; border: 1px solid #E9B535; color: #E9B535;" @click="handleSave">
          <span>保存</span>
        </div>
        <div class="report-button" style="margin-top: 50px; margin-left: -80px; width: 80px; height: 35px; line-height: 35px; background: #FFEEEF; border: 1px solid #FA533C; color: #FA533C;" @click="dialogShow = false">
          <span>取消</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllClassHour, setClassHour } from '@/api/classHoursAddList/addList'
export default {
  data () {
    return {
      tableData: [],
      dialogShow: false,
      formData: {
        id: '',
        zw: '',
        hsbz: '',
        yzkzfbl: '',
        zwName: ''
      },
      rules: {
        hsbz: [{ required: true, message: '请输入课时标准', trigger: 'blur' }],
        yzkzfbl: [{ required: true, message: '请输入优质课增发比例', trigger: 'blur' }]
      }
    }
  },
  mounted: function () {
    this.handleInitData()
  },
  methods: {
    handleInitData: function () {
      getAllClassHour().then(res => {
        this.tableData = res.data.data
      })
    },
    handleSet: function (row) {
      this.formData.id = row.id
      this.formData.zw = row.zw || row.zwKey
      this.formData.hsbz = row.hsbz
      this.formData.yzkzfbl = row.yzkzfbl
      this.formData.zwName = row.zwName
      this.dialogShow = true
    },
    handleSave: function () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('------------', this.formData)
          setClassHour(this.formData).then(res => {
            if (res.data.code === 200) {
              this.handleInitData()
              this.$message.success('课时标准设置成功！')
              this.dialogShow = false
            } else {
              this.$message.error('课时标准设置失败！')
            }
          })
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .report-button {
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    img {
      width: 17px;
      height: 17px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-right: 5px;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 76px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 76px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-weight: normal;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  .my-form-container {
    width: 100%;
    height: 879px;
    margin: 40px auto 18px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 5px;
    .my-form-item {
      height: 85px;
      border-bottom: 1px solid rgba(0, 76, 167, 0.39);
      margin-bottom: 0;
      > div {
        display: flex;
        height: 100%;
        &:nth-child(2) {
          .my-form-item-label {
            border-left: 1px solid rgba(0, 76, 167, 0.39);
          }
        }
        .my-form-item-label{
          width: 220px;
          padding-left: 60px;
          background: rgba(0, 76, 167, 0.1);
          display: flex;
          flex: none;
          align-items: center;
          color: #004CA7;
          font-size: 16px;
          font-weight: bold;
          border-left: 1px solid rgba(0, 76, 167, 0.39);
          margin-left: -1px;
          .mustW {
            color: red;
          }
        }
        .el-form-item__content{
          display: flex;
        }
      }
    }
  }
  /deep/ .el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 76%;
    left: 31.5%;
  }
</style>
